<% @page_title = "PostgreSQL Databases" %>

<% if @postgres_databases.count > 0 %>
  <%== part(
    "components/page_header",
    breadcrumbs: [%w[Projects /project], [@project_data[:name], @project_data[:path]], ["PostgreSQL Databases", "#"]],
    right_items: [<<-DROPDOWN]
      <div class="group dropdown relative inline-block text-left">
        <div>#{part("components/button", text: "Create PostgreSQL Database", right_icon: "hero-chevron-down")}
        </div>
        <div class="hidden opacity-0 scale-95 group-[.active]:block group-[.active]:opacity-100 group-[.active]:scale-100 transition ease-out duration-100 absolute -right-2 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" tabindex="-1">
          #{postgres_flavors.values.map do
            <<-ITEM
            <div class="py-1 hover:bg-gray-50" role="none">
              <a href="#{@project_data[:path]}/postgres/create?flavor=#{it.name}" class="block px-4 py-3 focus:outline-none">
                <h3 class="text-base font-semibold leading-6 text-gray-900">#{it.title}</h3>
                <p class="mt-1 text-sm text-gray-500">#{it.description}</p>
              </a>
            </div>
            ITEM
          end.join}
        </div>
      </div>
    DROPDOWN
  ) %>

  <div class="grid gap-6">
    <%== part(
      "components/table_card",
      headers: ["Name", "Compute", "Storage", "Version", "Parent", "Location", "State"],
      rows: @postgres_databases.map do |pg|
        [
          [
            [pg[:name], {link: @project_data[:path] + pg[:path] + "/overview"}],
            [pg[:vm_size]],
            [pg[:storage_size_gib]],
            [pg[:version]],
            [pg[:parent] ? pg[:parent].split("/").last : "", {link: pg[:parent] ? @project_data[:path] + pg[:parent] : ""}],
            pg[:location],
            ["pg_state_label", {component: { state: pg[:state] }}]
          ],
          {id: "pg-#{pg[:id]}"}
        ]
      end
    ) %>
  </div>
<% else %>
  <%== part(
    "components/page_header",
    title: "Create PostgreSQL Database",
    breadcrumbs: [%w[Projects /project], [@project_data[:name], @project_data[:path]], ["PostgreSQL Databases", "#"]]
  ) %>

  <div class="grid gap-6">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-10">
      <% postgres_flavors.values.each do %>
        <div class="rounded-lg shadow group relative bg-white p-6">
          <div>
            <span class="inline-flex rounded-lg overflow-hidden w-12 h-12">
              <img src="/icons/pg-<%= it.brand.downcase %>.png" class="object-cover"/>
            </span>
          </div>
          <div class="mt-4">
            <h3 class="text-base font-semibold leading-6 text-gray-900">
              <a href="<%= @project_data[:path] %>/postgres/create?flavor=<%= it.name %>" class="focus:outline-none">
                <span class="absolute inset-0" aria-hidden="true"></span>
                Create <%= it.title %>
              </a>
            </h3>
            <p class="mt-2 text-sm text-gray-500"><%= it.description %></p>
          </div>
          <span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400">
            <%== part("components/icon", name: "hero-arrow-up-right") %>
          </span>
        </div>
    <% end %>
    </div>
  </div>
<% end %>
